<template>
  <page-header-wrapper>
    <a-card :bordered="false" >
      <div style="display:flex;justify-content: space-between">
        <div>
          <a-button type="primary" @click="handleMember()">微信会员卡设置</a-button>
          <a-button type="primary" @click="handleMenu()" style="margin-left:10px">自定义菜单设置</a-button>
        </div>
        <div>
          <a-button type="danger" @click="handleCancelgzh()">取消微信公众号绑定</a-button>
        </div>
      </div>
      <a-divider />
      <a-row :gutter="16" type="flex" justify="center">
        <a-col :order="isMobile ? 2 : 1" :md="24" :lg="24">
          <a-form layout="horizontal">
            <a-form-item
              label="关注自动回复"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
              <a-textarea />
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-button type="primary" @click="handle()">保存</a-button>
            </a-form-item>
          </a-form>
          <a-divider />
          <a-form layout="horizontal">
            <a-form-item
              label="用户消息响应时间"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
              <a-input addonAfter="秒" v-decorator="['amount', { initialValue: '0' }]" />
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-alert
                message="客户在公众号发送的消息会立即转发到销售负责人的微信号(通过模板消息)。如果在设置时间里没有回复，会逐级依次转发至店客服经理、总店客服经理。"
                type="error"
              />
            </a-form-item>

            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-button type="primary" @click="handle()">保存</a-button>
            </a-form-item>
          </a-form>
          <a-divider />
          <div class="table-operator">
            <a-button type="primary" @click="handleClick()">新增关键字</a-button>
          </div>
          <a-table ref="recordtable" size="default" rowKey="key" :columns="columns" :data-source="loadData">
            <span slot="status" slot-scope="text, record">
              <template>
                <a-tag color="#82af6f" v-if="record?.status == 1">启用中</a-tag>
                <a-tag color="#abbac3" v-else>已停用</a-tag>
              </template>
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                {{ record.empName }} <a-tag color="#428bca" @click="handleEdit(record)">编辑</a-tag>
              </template>
            </span>
          </a-table>
          <a-divider />
          <a-table ref="recordtable" size="default" rowKey="key" :columns="columns1" :data-source="loadData1">
            <span slot="status" slot-scope="text, record">
              <template>
                <a-tag color="#82af6f" v-if="record?.status == '1'">已添加</a-tag>
                <a-tag color="#abbac3" v-else>未添加</a-tag>
              </template>
            </span>
            <span slot="action" slot-scope="text, record">
              <template> {{ record.empName }} <a-tag color="#428bca" @click="handleAdd(record)">添加</a-tag> </template>
            </span>
          </a-table>
          <a-divider />
          <a-alert
            message="请将域名  a8.52jiewang.com(点击复制)  填在授权回调网页域名，然后将点击下载的认证文件选择上传以便使用微信登录"
          />
          <a-form layout="horizontal" style="margin-top: 20px">
            <a-form-item
              label="认证文件txt"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
            >
              <a-upload
                name="file"
                :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                @change="handleChange"
              >
                <a-button>
                  <upload-outlined></upload-outlined>
                  选择文件
                </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
              <a-button type="primary" @click="handle()">上传认证文件</a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :order="1" :md="24" :lg="8" :style="{ minHeight: '180px' }"> </a-col>
      </a-row>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      :option="option"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>
  
  <script>
import { baseMixin } from '@/store/app-mixin'
import CreateForm from './CreateForm'
export default {
  name: 'WechatDetail',
  components: {
    CreateForm,
  },
  mixins: [baseMixin],
  data() {
    return {
      // cropper
      mdl: null,
      visible: false,
      value: '',
      confirmLoading: false,
      preview: {},
      columns: [
        {
          title: '关键字',
          dataIndex: 'name',
        },
        {
          title: '回复内容',
          dataIndex: 'desc',
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      columns1: [
        {
          title: '模板消息名',
          dataIndex: 'title',
        },
        {
          title: '模板编号',
          dataIndex: 'no',
        },
        {
          title: '模板ID',
          dataIndex: 'id',
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      loadData: [
        { name: '测试', desc: '测试回复', status: '1', id: 1 },
        { name: '测试1', desc: '测试回复1', status: '1', id: 1 },
      ],
      loadData1: [
        { title: '消息通知', no: 'OPENTM201838773', status: '1', id: 1 },
        { title: '测试1', no: 'OPENTM202199511', status: '1', id: 1 },
        { title: '测试2', no: 'OPENTM401973756', status: '1', id: 1 },
      ],
      option: {
        img: '/avatar2.jpg',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
      },
    }
  },
  methods: {
    handleMember(){
      this.$router.push({ path: `/system/wechat/memberCard` })
    },
    handleMenu(){
      this.$message.warn('开发中')
      // this.$router.push({ path: `/system/wechat/memberLevel` })
    },
    handleAdd() {
      this.$message.error('微信服务连接失败，请稍后再试或者咨询小算盘工作人员！')
    },
    handleClick() {
      this.confirmLoading = false
      this.visible = true
    },
    handleEdit(record) {
      this.mdl = { ...record }
      this.confirmLoading = false
      this.visible = true
    },
    handleOk() {
      this.confirmLoading = true
      const form = this.$refs.createModal.form
      form.validateFields((errors, values) => {
        if (!errors) {
          this.$message.warn('开发中')
          this.confirmLoading = false
        } else {
          this.$message.warn('开发中')
          this.confirmLoading = false
        }
      })
    },
    handleCancelgzh() {
      const that = this
      this.$confirm({
        title: '取消',
        content: '你确定要取消微信公众号绑定状态吗',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.$message.warn('开发中')
        },
      })
    },
    handleCancel() {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    setavatar(url) {
      this.option.img = url
    },
    handle() {
      this.$message.warn('开发中')
    },
    refresh() {
      this.$router.push({ path: `/system/wechat/detail` })
    },
  },
}
</script>
  
  <style lang="less" scoped>
.avatar-upload-wrapper {
  width: 100%;
  height: 200px;
}
.ant-upload-preview {
  position: relative;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    padding: 0.5rem;
    font-size: 1.4rem;
    background: rgba(222, 221, 221, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }
  .mask {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s;
    &:hover {
      opacity: 1;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -1rem;
      margin-left: -1rem;
      color: #d6d6d6;
      font-size: 2rem;
    }
  }
  img,
  .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
  }
}
</style>
  